<!-- 船代结算 -->
<template>
  <div class="ship-settlement">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-select size="mini" filterable v-model="formData.shipAgencyId" @visible-change="selectShip" @change="getShipSettementList(1, 15)">
            <el-option label="所有船代" value=""></el-option>
            <el-option v-for="item in shipList" :key="item.ID" :label="item.text" :value="item.shipAgencyId"></el-option>
          </el-select>
          <el-button type="primary" plain icon="el-icon-check" size="mini" @click="openSettlement()">结算</el-button>
          <el-button type="danger" size="mini" icon="el-icon-refresh" @click="openFallback()">结算回退</el-button>
          <!-- <el-button type="primary" size="mini" icon="el-icon-search">结算单查看</el-button> -->
          <!-- <el-button type="warning" size="mini" v-if="loadShow" icon="el-icon-document" @click="batchExport()">批量导出</el-button> -->
          <el-button type="primary" size="mini" v-if="loadShow" @click="exportExcel">批量导出</el-button>
          <el-button type="primary" size="mini" v-else :loading="true">导出中</el-button>
          <download-excel
            id="shipsettlement"
            v-show="false"
            :header="excelTitle"
            :data="tableData"
            :fields="myobj"
            name="船代结算"></download-excel>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px; margin-bottom: 20px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="getShipSettementList(1,15)"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="getShipSettementList(1,15)">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column
        align="center"
        label="船代">
        <template slot-scope="scope">
          {{scope.row.shipAgencyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="未付金额">
        <template slot-scope="scope">
          {{scope.row.wjqMoney}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="本期未付金额">
        <template slot-scope="scope">
          {{scope.row.bqwjqMoney}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="180"
        label="最新结算周期">
        <template slot-scope="scope">
          {{scope.row.jsTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          {{scope.row.state | moneyState}}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="备注">
        <template slot-scope="scope">
          {{scope.row.CompanyName}}
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-tickets" @click="handeList(scope.row.shipAgencyId)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="salesman-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[15, 20, 30]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 结算 -->
    <ship-settlement-dialog :shipAgencyId="shipAgencyId"></ship-settlement-dialog>
    <!-- 结算回退 -->
    <ship-fallback-dialog :shipAgencyId1="shipAgencyId1"></ship-fallback-dialog>
    <!-- 结算单查看 -->
    <!-- <billinglist-view-dialog></billinglist-view-dialog> -->
    <!-- 结算清单 -->
    <ship-settlementlist-dialog :shipAgencyId2="shipAgencyId2"></ship-settlementlist-dialog>
  </div>
</template>

<script>
import {
  shipSettlementList,
  shipAgencyList,
  shipBatchExport
} from './api/finance'
import ShipSettlementDialog from './dialog/shipSettementDialog/ShipSettlementDialog'
import ShipFallbackDialog from './dialog/shipSettementDialog/ShipFallbackDialog'
import ShipSettlementlistDialog from './dialog/shipSettementDialog/ShipSettlementlistDialog'
// import BillinglistViewDialog from './dialog/financialSettlement/BillinglistViewDialog'
export default {
  components: {
    ShipSettlementDialog,
    ShipFallbackDialog,
    ShipSettlementlistDialog
    // BillinglistViewDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        shipAgencyId: '',
        searchMent: ''
      },
      myobj: {
        '船代': 'shipAgencyName',
        '未付金额': 'wjqMoney',
        '本期未付金额': 'bqwjqMoney',
        '最新结算周期': 'jsTime',
        '状态': {
          field: 'state',
          callback: value => {
            return value === 0 ? '未结清' : value === 1 ? '全部' : value === 2 ? '产生结算' : value === 3 ? '结清' : value
          }
        }
      },
      excelTitle: [
        '船代结算'
      ],
      pageNo: 1,
      number: 15,
      total: 0,
      shipAgencyId: '',
      shipAgencyId1: '',
      shipAgencyId2: '',
      loading: true,
      loadShow: true,
      multipleSelection: [],
      shipList: [] // 客户列表
    }
  },
  mounted () {
    this.getShipList()
    this.getShipSettementList(1, 15)
  },
  methods: {
    // 获取船代信息
    async getShipList () {
      const res = await shipAgencyList({})
      if (res.status === 200) {
        this.shipList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 船代结算列表
    async getShipSettementList (pg, nb) {
      this.loading = true
      const res = await shipSettlementList({
        shipAgencyId: this.formData.shipAgencyId,
        curpage: pg, // 页码
        pageSize: nb, // 页数
        searchCondition: this.formData.searchMent
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 船代结算批量导出
    async batchExport () {
      this.loadShow = false
      let that = this
      const res = await shipBatchExport({})
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        setTimeout(function () {
          that.loadShow = true
        }, 500)
        window.location.href = res.data[0].path
        this.getShipSettementList(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    exportExcel () {
      if (this.tableData.length === 0) {
        return false
      }
      this.getShipSettementList(1, this.total)
      let isShow = false
      let that = this
      setTimeout(function () {
        document.getElementById('shipsettlement').click()
        isShow = true
        if (isShow) {
          that.getShipSettementList(1, 15)
        }
      }, 1500)
    },
    // 结算回退
    openFallback () {
      this.shipAgencyId1 = this.formData.shipAgencyId
      this.$store.commit('show_ship_fallback_dialog')
    },
    selectShip (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.getShipList()
        }, 500)
      }
    },
    // 结算
    openSettlement () {
      this.shipAgencyId = this.formData.shipAgencyId
      this.$store.commit('show_ship_settlement_dialog')
    },
    handeList (id) {
      this.shipAgencyId2 = id
      this.$store.commit('show_ship_settlementlist_dialog')
    },
    openBilling () {
      this.$store.commit('show_billing_list_dialog')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      this.getShipSettementList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getShipSettementList(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style lang="less">
 .salesman-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
